<template>
    <div class="container">
        <el-card class="box-card" shadow="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" :content="'申领行程单'"></el-page-header>
            </div>
            <div class="itinerary_detail_content">
                <TableCard title="行程单列表" :table_data="table_data" :table_item="table_item" :user="'list'"
                    @row_index="row_index" :loading="loading" />
            </div>
            <el-dialog title="注意" :visible.sync="book_dialog_visible" width="300px" center append-to-body>
                <span slot="title" style="color: #F56C6C;font-size:20px"><i class="el-icon-warning"></i> 注意</span>
                确定要申领该行程吗?
                <span slot="footer" class="dialog-footer">
                    <el-button @click="book_dialog_visible = false" size="medium">取 消</el-button>
                    <el-button type="primary" @click="book()" size="medium">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>

    </div>
</template>

<script>
import TableCard from '../reusable_components/table_card.vue';
import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {
    components: {
        SvgIcon,
        TableCard,
    },

    data() {
        return {
            book_dialog_visible: false,
            itinerary_id: 0,
            table_item: [
                { key: 't_name', value: '景区' },
                { key: 'starting_point', value: '起点' },
                { key: 'destination', value: '终点' },
                { key: 'start_time', value: '出发时间' },
                { key: 'end_time', value: '结束时间' },
                { key: 'schedule', value: '活动' },
            ],

            table_data: [],
            loading: true
        }
    },

    mounted() {
        this.get_itinerary_list()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        row_index(val) {
            console.log(val)
            this.itinerary_id = val
            this.book_dialog_visible = true
        },

        async get_itinerary_list() {
            this.loading = true
            const res = await this.$http.post("/itinerary/findallitinerary", {
                // 携带数据
                g_id: sessionStorage.user_id,
                pageNum: 1,
                pageSize: 100
            });
            if (res) {
                this.table_data = res.data.data.information
                this.loading = false
                // .log(this.table_data)
            }
        },

        async book() {
            this.book_dialog_visible = false
            const res = await this.$http.post("/itinerary/gapplyi", {
                // 携带数据
                g_id: sessionStorage.user_id,
                i_id: this.itinerary_id,
            });
            console.log(this.itinerary_id)
            if (res.data.code === 2000 && res.data.data === 1) {
                this.$message.success('成功')
                this.book_dialog_visible = false
            } else {
                this.$message.error('失败')
            }
        },

        logout() { },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .itinerary_detail_content {
        height: 80vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */

    }

    .itinerary_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

}

.box-card {
    border: 0;
}
</style>